<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link rel="stylesheet" href="/Public/css/model.css">
    <style>
        .search_user{
            padding: 20px 0;
            border-bottom: dashed 1px #c9c9c9;
        }
        .search_div{
            width: 790px;
            height: 40px;
            margin: 0 auto;
            padding-top: 10px;
            position: relative;
        }
        .search_div button{
            width: 103px;
            height: 33px;
            position: absolute;
            top: 10px;
            right: 0;
        }
        .search_button{
            width: 1200px;
            text-align: center;
            padding: 25px 0 40px;
            margin: 0 auto;
        }
        .search_button input{
            border: none;
            padding: 5px 15px;
            border-radius: 3px;
            margin: 0 12px;
            background: #eeeeee;
        }
        .search_button input:hover{
            background-color: #46b8da;
            color: white;
        }
        .search_button .input_active {
            background-color: #46b8da;
            color: white;
        }
        .search_table thead{
            background: #f0f8fa;
            border: none;
        }
        .table{
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }
        .table>thead>tr>th {
            border-bottom:none !important;
            text-align: center !important;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }
    </style>
    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">

</head>
<body>
<div id="main_C">
    <div class="search_user">
        <div class="form-group search_div">
            <div class="input-group col-xs-12">
                <div class="input-group-btn">
                    <select name="type" class="form-control" style="width: 100px;color: #959595;background: #eeeeee;border-bottom-left-radius: 3px;border-top-left-radius: 3px;">
                        <option value="1">姓名</option>
                        <option value="2">号码</option>
                    </select>
                </div>
                <input style="width: 565px;" type="text" name="keyword" id="keyword" class="form-control">
            </div>
            <button style="" class="btn btn-info" id="search_submit" type="submit">搜索</button>
        </div>
    </div>
    <div class="search_button">
        <input class="input_active" type="button" value="我的客户"/>
        <input type="button" value="已借贷客户"/>
        <input type="button" value="未借贷客户"/>
        <input type="button" value="逾期客户"/>
        <input type="button" value="坏账客户"/>
    </div>
    <div class="search_table">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>创建时间</th>
                    <th>最后沟通时间</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>林元杰</td>
                <td>女</td>
                <td>138****1243</td>
                <td>2017-12-21 19:20</td>
                <td>2017-12-21 19:20</td>
            </tr>
            <tr>
                <th scope="row">1</th>
                <td>林元杰</td>
                <td>女</td>
                <td>138****1243</td>
                <td>2017-12-21 19:20</td>
                <td>2017-12-21 19:20</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/pager.js"></script>
<script>

    $(document).ready(function(){
        $(".search_button  input").click(function(){
            $(".search_button").find("input").removeClass("input_active");
            $(this).addClass("input_active");
            console.log('98989',23);
            var index=$(this).index()+1;
            console.log('21321',index);
        });
    });
</script>
</body>
</html>